<template>
    <div class="dialoglistDiv">
        <div class="table_box">
            <div class="table_" id="tb">
                <ul class="head">
                    <li class="mw50">企业名称</li>
                    <li class="mw100">报名人</li>
                    <li class="mw100">预约日期</li>
                    <li class="mw500">
                        <div class="alltime">
                            <span v-for="(x,i) in obj.alltime" :key="i">{{x.text}}</span>
                        </div>
                    </li>
                </ul>
                <div class="body">
                    <ul v-for="x in obj.ary" :key="x">
                        <li class="mw150">
                            <el-tooltip class="box-item" effect="dark" :content="x.companyname" placement="top-start" :disabled="x.companyname.length<7">
                                <div class="lineOne pointer">{{x.companyname}}</div>
                            </el-tooltip>
                        </li>
                        <li class="mw100">{{x.staffname}}</li>
                        <li class="mw100">{{x.day}}</li>
                        <li class="mw500"><timeLine :value="x.times"/></li>
                    </ul>
                </div>
            </div>
        </div>
        <Pager :value="obj.req" :init="init" />
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, toRefs, provide, computed } from 'vue'
    import Pager from '@/components/pager.vue'
    import timeLine from "./timeline.vue"

    let { proxy } = getCurrentInstance()
    const props = defineProps({
        room_id: { type: String },
        day: { type: String }
    })

    let obj = reactive({
        ary: [],
        req: {
            currentpage: 1,
            pagesize: 10,
            count: 0,
            room_id: props.room_id,
            day: props.day,
        },
        alltime:[]
    });
    let before_init = () => {
        //从早上7点到晚上11点，每隔5分钟，放入数组
        let startd = new Date('2000-01-01 07:00'), endd = new Date('2000-01-01 23:00')
        while(endd >= startd){
            let item = {start:startd, end:new Date(startd.getTime()+120*60*1000)}
            item.text = proxy.$utils.dateFormat(item.start,"hh:mm")
            // item.text = proxy.$utils.dateFormat(item.start,"hh:mm") +" - " + proxy.$utils.dateFormat(item.end,"hh:mm")
            obj.alltime.push(item)
            startd = new Date(startd.getTime()+120*60*1000); //每次加1小时
        }
    }
    before_init()
    let init = () => {
        proxy.$ajax({
            url: '/life/room_sign',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }

</script>

<style scoped>
    ::-webkit-scrollbar { width:10px; background-color: #FFFFFF; }
    .listDiv { top:70px; }

    .alltime { display: flex; flex: 1; height: 30px; justify-content: space-around; }
    .alltime span { display: flex; flex: 1; }
</style>